// 用户管理

<template>
  <div class="containerBox wrap">
    <!-- 查询form -->
    <cusCard>
      <div class="searchBox">
        <el-form :model="roleForm" :inline="true">
          <el-form-item label="姓名：">
            <el-input v-model.trim="roleForm.roleName" placeholder="请输入姓名" @keyup.enter="searchHandler" clearable />
          </el-form-item>
          <el-form-item label="账号：">
            <el-input v-model.trim="roleForm.roleAccount" placeholder="请输入账号" @keyup.enter="searchHandler" clearable />
          </el-form-item>
          <el-form-item label="联系电话：">
            <el-input v-model.trim="roleForm.rolePhone" placeholder="请输入联系电话" @keyup.enter="searchHandler" clearable />
          </el-form-item>
          <el-form-item>
            <cusButton color="#0052D9" @click="searchHandler" v-hasPerm="10">查询</cusButton>
            <cusButton CssObj="border-color:#0052D9;color:#0052D9" @click="resetHandler">重置
            </cusButton>
          </el-form-item>
        </el-form>

      </div>
    </cusCard>

    <!-- 角色 table -->
    <cusCard class="cmt-16 wrap-table">
      <cusButton color="#0052D9" @click="addHandler('add')" v-hasPerm="20">
        <i-ep-plus />添加
      </cusButton>
      <cusTable :tableData="userTableData" :tableColumns="tableColumns" @changeCol="changeCol" :loading="loading"
        :showSelect="false">
        <template #switch="{ row }">
          <el-switch v-model="row.status" @change="changeStatus($event, row)" :disabled="row.id == curUserId" />
        </template>
        <template #headPortrait="{ row }">
          <div v-if="row.headPortrait">
            <viewer class="image-box" :images="row.headPortrait">
              <img :src="row.headPortrait" mode="contain" style="width: 110px;height: 110px;" />
            </viewer>
          </div>
          <div v-else>
            <el-image style="width: 110px;height: 110px;" class="center">
              <template #error>
                <div class="image-slot ">
                  <el-icon color="#ddd" size="35">
                    <i-ep-picture />
                  </el-icon>
                  暂无图片
                </div>
              </template>
            </el-image>
          </div>
        </template>

        <template #operation="{ row }">
          <cusButton style="color:#0052D9;padding:0" :text="true" @click="addHandler('edit', row)" v-hasPerm="30">编辑
          </cusButton>
          <cusButton style="color:#0052D9;padding:0" :text="true" @click="resetPsdHandler(row)">重置密码
          </cusButton>
          <cusButton style="color:#0052D9;padding:0" :text="true" @click="autherHandler(row)">{{
          row.appScope ? '取消授权'
            : '授权登录小程序' }} </cusButton>
        </template>
      </cusTable>
      <div class="cmt-16 float-right">
        <cusPagination @handleSizeChange="sizeChange" @handleCurrentChange="currentChange" :all="pageObj">
        </cusPagination>
      </div>
    </cusCard>

    <!-- 编辑/添加人员弹框 -->
    <editDialog ref="editRef" @onInit="getUserList"></editDialog>
    <!-- 重置密码 -->
    <resetPsd ref="psdRef"></resetPsd>

  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { reqUserList, reqSwitchStatus, reqModifyUserInfo } from "@/api/business/user";
import editDialog from "./components/editDialog.vue";
import resetPsd from "./components/resetPsd.vue";
import { useUserStoreHook } from '@/store/modules/user'
// import bound from "./components/bound.vue";

const curUserId = useUserStoreHook().pinia_userInfo.baseInfo.id
/**
 * 初始化数据
 * @param formInit 初始搜索表单数据
 * @param pageInit 初始分页数据
 */
const formOrigin = () => ({
  roleName: "",
  roleAccount: "",
  rolePhone: "",
});

const pageInit = () => ({
  total: 0,
  page: 1,
  pageSize: 10,
});
const roleForm = ref(formOrigin());
const pageObj = ref(pageInit());
const loading = ref(false);

// 切换状态
const changeStatus = ($event, row) => {
  reqSwitchStatus({
    status: Number($event),
    userId: row.id
  }).then(res => {
    if (res.code === 1) {
      ElMessage.success('切换成功')
      getUserList()
    } else {
      ElMessage.info(res.msg)
    }
  })
}

// 查询
const searchHandler = () => {
  getUserList();
};

// 重置查询
const resetHandler = () => {
  roleForm.value = formOrigin();
  pageObj.value = pageInit();
  getUserList();
};
const sizeChange = (val: number) => {
  pageObj.value.pageSize = val;
  getUserList();
};

const currentChange = (val: number) => {
  pageObj.value.page = val;
  getUserList();
};
const boundRef = ref(null);

const editRef = ref(null);
// 添加事件
const addHandler = (type, row) => {
  if (type === "edit") {
    editRef.value.show(row.id);
    return;
  }
  editRef.value.show();
};

const autherHandler = (row) => {
  let obj = JSON.parse(JSON.stringify(row))
  obj.appScope = Number(!obj.appScope)
  reqModifyUserInfo({
    ...obj,
  }).then(res => {
    if (res.code === 1) {
      ElMessage.success('操作成功')
      getUserList()
    } else {
      ElMessage.info(res.msg)
    }
  })
}

const psdRef = ref(null);
// 重置密码
const resetPsdHandler = (row) => {
  psdRef.value.show(row.id);
};

// 表格列数据
const tableColumns = reactive([
  { label: "账号", prop: "loginName", width: "120" },
  { label: "姓名", prop: "name", width: "120" },
  { label: "用户图片", prop: "headPortrait", width: "150", slot: true },
  { label: "单位名称", prop: "departmentName", width: "120" },
  { label: "角色", prop: "roleNames", width: "120" },
  { label: "联系电话", prop: "phoneNumber", width: "150" },
  { label: "创建时间", prop: "gmtCreate", width: "170" },
  { label: "启用/禁用", prop: "switch", slot: true },
  {
    label: "操作",
    prop: "operation",
    slot: true,
    width: "230",
    fixed: "right",
  },
]);

// 改变列排序
const changeCol = ({ oldIndex, newIndex }) => {
  const empty = 2; // 跳过选择框和序号列
  const oldItem = tableColumns[oldIndex - empty];
  tableColumns.splice(oldIndex - empty, 1);
  tableColumns.splice(newIndex - empty, 0, oldItem);
};

// 表格数据
const userTableData = ref([]);

// 请求用户列表
const getUserList = () => {
  loading.value = true;
  reqUserList({
    loginName: roleForm.value.roleAccount,
    name: roleForm.value.roleName,
    phoneNumber: roleForm.value.rolePhone,
    pageSize: pageObj.value.pageSize,
    currentPage: pageObj.value.page,
  }).then((res) => {
    loading.value = false;
    if (res.code === 1) {
      res.data.list.map((el) => {
        el.status = Boolean(el.status);
      });
      userTableData.value = res.data.list;
      pageObj.value.total = res.data.total;
    }
  });
};


onMounted(() => {
  getUserList();
});
</script>

<style lang="scss" scoped>
.image-slot {
  width: 100%;
  height: 100%;
  background: #f7f5f5d7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #ddd;
  font-size: 12px;
}

// .icon {
//   width: 100%;
//   height: 100%;
// }</style>